<template>
  <div class="box">
    <!-- <div class="title-img"></div> -->
    <div class="">
      <div class="jygl-box">
          <div
            class="lm-top"
            :style="`background:url(${bgImg[1]});background-size: 100% 100%;`"
          ></div>
          <div class="main">
            <div class="fw-600 fs-16" style="text-align:center;margin-bottom:10px">平均在销品牌数量(个)</div>
            <div class="main1">
              <div
                class="main1-item"
                v-for="(item, index) in [jygla[0],jygla[1]]"
                :key="index"
              >
                <div class="num">
                  <div>
                    <span class="fw-600" style="display:inline-block;width:60px">{{ item.name }}</span>
                    <span class="fs-28 fw-600 main-color">
                      <count-to
                        v-if="item.num"
                        :startVal="0"
                        :endVal="Number(item.num)"
                        :duration="3000"
                      ></count-to>
                      <span v-else>0</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="fw-600 fs-16" style="text-align:center;margin:10px 0px">
              <span >
                <img
                  style="width: 10px; height: 10px; "
                  src="../../assets/common-new/nation-icon.png"
                  alt=""
                />
              </span>
              平均在销规格数量(个)
            </div>
            <div class="main1">
              <div
                class="main1-item"
                v-for="(item, index) in [jygla[2],jygla[3]]"
                :key="index"
              >
               
                <div class="num">
                  <span class="fw-600" style="display:inline-block;width:60px">{{ item.name }}</span>
                    <span class="fs-28 fw-600 main-color">
                    <count-to
                      v-if="item.num"
                      :startVal="0"
                      :endVal="Number(item.num)"
                      :duration="3000"
                    ></count-to>
                    <span v-else>0</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
      </div>
      <div class="jygl-box">
          <div
            class="lm-top"
            :style="`background:url(${bgImg[2]});background-size: 100% 100%;`"
          ></div>
          <div class="main" style="height:320px;">
            <div class="fw-600 fs-16" style="text-align:center;margin-bottom:10px">累计销量(个)</div>
            <div class="main1">
              <div
                class="main2-item"
              >
              <div class="num" >
                  <div class="capacity-box hoverpointer">
                    <div v-show="saleTotal" class="saleTotalClass">
                      <div class="capacity-box">
                        <div
                           class="body"
                        >
                          <div class="body-item">烟弹(个)</div>
                          <div class="body-item">{{ Number(saleData.smoke_bomb_a) }}</div>
                       </div>
                       <div
                           class="body"
                        >
                          <div class="body-item">烟具(个)</div>
                          <div class="body-item">{{ Number(saleData.smoke_set) }}</div>
                       </div>
                       <div
                           class="body"
                        >
                          <div class="body-item">一次性(个)</div>
                          <div class="body-item">{{ Number(saleData.disposable) }}</div>
                       </div>
                       <div
                           class="body"
                        >
                          <div class="body-item">套装(个)</div>
                          <div class="body-item">{{ Number(saleData.total_set) }}</div>
                       </div>
                     </div>
                    </div>
                    <div>
                       <span class="fw-600" style="display:inline-block;width:60px">当年</span>
                       <span class="fs-28 fw-600 main-color"
                         @mouseenter=" saleTotal= true"
                           @mouseleave=" saleTotal= false"
                         ><count-to
                           v-if="saleData.sell_a"
                           :startVal="0"
                           :endVal="Number(saleData.sell_a)"
                           :duration="3000"
                           :decimals="0"
                         ></count-to
                       >
                       <span v-else class="fw-600 main-color" >0</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="main2-item"
              >
                <div class="num">
                  <div>
                    <span class="fw-600" style="display:inline-block;width:60px">当月</span>
                    <span class="fs-28 fw-600 main-color">
                      <span v-if="!saleData.month_sell_a_number">0</span>
                      <count-to
                        v-else
                        :startVal="0"
                        :endVal="Number(saleData.month_sell_a_number)"
                        :duration="3000"
                      ></count-to>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="fw-600 fs-16" style="text-align:center;margin:10px 0px">
              <span >
                <img
                  style="width: 10px; height: 10px; "
                  src="../../assets/common-new/nation-icon.png"
                  alt=""
                />
              </span>
             累计销售收入(万元)
            </div>
            <div class="main1">
              <div
                class="main2-item"
              >
                <div class="num">
                  <div>
                    <span class="fw-600" style="display:inline-block;width:60px">当年</span>
                    <span class="fs-28 fw-600 main-color">
                      <span v-if="!saleData.sell_income">0</span>
                      <count-to
                        v-else
                        :startVal="0"
                        :decimals="2"
                        :endVal="Number((Number(saleData.sell_income)/10000).toFixed(2))"
                        :duration="3000"
                      ></count-to>
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="main2-item"
              >
                <div class="num">
                  <div>
                    <span class="fw-600" style="display:inline-block;width:60px">当月</span>
                    <span class="fs-28 fw-600 main-color">
                      <span v-if="!saleData.month_sell_income">0</span>
                      <count-to
                        v-else
                        :startVal="0"
                        :decimals="2"
                        :endVal="Number((Number(saleData.month_sell_income)/10000).toFixed(2))"
                        :duration="3000"
                      ></count-to>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="main3">
              <div
                class="main3-item"
                v-for="(item, index) in ljml"
                :key="index"
              >
                <span class="title fs-14 fw-600">{{ item.name }}</span
                >
                <div class="num">
                <span class="fs-22 fw-600 main-color ">
                  <count-to
                    :startVal="0"
                    :endVal="Number(item.num)"
                    :duration="3000"
                    :decimals="2"
                  >
                  </count-to>
                </span>
                <!-- <span>&nbsp;{{item.unit}}</span> -->
                 </div>
                </div>
              </div>
            </div>
          </div>

 
     
    </div>
  </div>
  <!-- <div class="box">
    <div class="title-img"></div>
    <div class="content-wrapper">
      <div class="sale-qty-wrapper">
        <div class="title">
          <span class="fw-600">年累计销量</span>
        </div>
        <div class="item-wrapper">
          <div class="item">
            <span class="fs-24 fw-600 main-color">
              <span v-if="!saleData.sell_box">-</span>
              <count-to
                v-else
                :startVal="0"
                :endVal="Number(saleData.sell_box)"
                :duration="3000"
              ></count-to>
            </span>
            <span>(盒)</span>
          </div>
          <div class="item">
            <span class="fs-24 fw-600 main-color">
              <span v-if="!saleData.sell_a">-</span>
              <count-to
                v-else
                :startVal="0"
                :endVal="Number(saleData.sell_a)"
                :duration="3000"
              ></count-to>
            </span>
            <span>(个)</span>
          </div>
          <div class="item">
            <div class="name">
              <span class="fw-400">排名</span>
            </div>
            <span class="fs-24 fw-600 main-color">
              <span v-if="!saleData.sell_lj_rank">-</span>
              <count-to
                v-else
                :startVal="0"
                :endVal="Number(saleData.sell_lj_rank)"
                :duration="3000"
              ></count-to>
            </span>
          </div>
        </div>
      </div>
      <div class="sale-qty-wrapper" style="height: 90px">
        <div class="title">
          <span class="fw-600">当月累计销量</span>
        </div>
        <div class="item-wrapper">
          <div class="item-row">
            <div class="item">
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.month_sell_box_number">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.month_sell_box_number)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(盒)</span>
            </div>
            <div class="item">
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.month_sell_a_number">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.month_sell_a_number)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(个)</span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">排名</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.month_sell_number_rank">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.month_sell_number_rank)"
                  :duration="3000"
                ></count-to>
              </span>
            </div>
          </div>
          <div class="item-row">
            <div class="item">
              <div class="name">
                <span class="fw-400">环比</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.sell_up_down">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.sell_up_down)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(%)</span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">同比</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.basis_up_down">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.basis_up_down)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(%)</span>
            </div>
          </div>
        </div>
      </div>
      <div class="sale-qty-wrapper">
        <div class="title">
          <span class="fw-600">累计销售收入</span>
        </div>
        <div class="item-wrapper">
          <div class="item-row">
            <div class="item">
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.sell_income">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.sell_income)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(元)</span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">排名</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.sell_income_rank">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.sell_income_rank)"
                  :duration="3000"
                ></count-to>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="sale-qty-wrapper" style="height: 90px">
        <div class="title">
          <span class="fw-600">当月销售收入</span>
        </div>
        <div class="item-wrapper">
          <div class="item-row">
            <div class="item">
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.month_sell_income">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.month_sell_income)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(盒)</span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">排名</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.income_rank">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.income_rank)"
                  :duration="3000"
                ></count-to>
              </span>
            </div>
          </div>
          <div class="item-row">
            <div class="item">
              <div class="name">
                <span class="fw-400">环比</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.income_up_down">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.income_up_down)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(%)</span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">同比</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.income_tb">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.income_tb)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(%)</span>
            </div>
          </div>
        </div>
      </div>
      <div class="sale-qty-wrapper" style="height: 90px">
        <div class="title">
          <span class="fw-600">电子烟烟具累计销售情况</span>
        </div>
        <div class="item-wrapper">
          <div class="item-row">
            <div class="item">
              <div class="name">
                <span class="fw-400">烟弹</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.smoke_bomb_box">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.smoke_bomb_box)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(盒)</span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">烟弹</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.smoke_bomb_a">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.smoke_bomb_a)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(个)</span>
            </div>
          </div>
          <div class="item-row">
            <div class="item">
              <div class="name">
                <span class="fw-400">烟具</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.smoke_set">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.smoke_set)"
                  :duration="3000"
                ></count-to>
              </span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">一次性</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.disposable">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.disposable)"
                  :duration="3000"
                ></count-to>
              </span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">套装</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.total_set">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.total_set)"
                  :duration="3000"
                ></count-to>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="sale-qty-wrapper">
        <div class="item-wrapper">
          <div class="item-row">
            <div class="item">
              <div class="name">
                <span class="fw-400">累计毛利</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.gross_profit_margin">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.gross_profit_margin)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(盒)</span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">排名</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.gross_profit_margin_rank">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.gross_profit_margin_rank)"
                  :duration="3000"
                ></count-to>
              </span>
              <span>(个)</span>
            </div>
          </div>
          <div class="item-row">
            <div class="item">
              <div class="name">
                <span class="fw-400">累计单盒销售结构</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.box_structure">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.box_structure)"
                  :duration="3000"
                ></count-to>
              </span>
            </div>
            <div class="item">
              <div class="name">
                <span class="fw-400">排名</span>
              </div>
              <span class="fs-24 fw-600 main-color">
                <span v-if="!saleData.box_structure_rank">-</span>
                <count-to
                  v-else
                  :startVal="0"
                  :endVal="Number(saleData.box_structure_rank)"
                  :duration="3000"
                ></count-to>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script>
import { getECigarCityData } from "@/api/ecigar";

export default {
  name: "citySaleData",
  props: {
    orgUuid: {
      type: String,
    },
    showCityData: {
      type: Boolean,
    },
  },
  data() {
    return {
      saleTotal:false,
      saleData: {},
      saleQty: {},
      saleQtyArr: [],
      saleAmt: [],
      smokeSet: [],
      saleProfit: [],
      boxStructure: [],
      ljml: [
        {
          name: "累计毛利额(万元)",
          num: 0,
          unit: "万元",
        },
        {
          name: "累计单盒销售结构",
          num: 0,
          unit: "元",
        },
      ],
      bgImg: [
        require("../../assets/dzygl-new/xzxk/title.png"),
        require("../../assets/dzygl-new/ppgl/title.png"),
        require("../../assets/dzygl-new/jygl/title.png"),
        require("../../assets/dzygl-new/khyl/mletitle.png"),
        require("../../assets/dzygl-new/djjg/title3.png"),
        require("../../assets/dzygl-new/djjg/num-bg2.png"),
        require("../../assets/dzygl-new/fjps/title.png"),
        require("../../assets/djds-new/map-title.png"),
      ],
      jygla: [
        {
          // name: "全国平均在销品牌数量(个)",
          name: "全国",
          num: 20,
        },
        {
          // name: "我省在销品牌数量(个)",
          name: "安徽",
          num: 21,
          range: 15,
        },
        {
          // name: "全国平均在销规格数量(个)",
          name: "全国",
          num: 92,
        },
        {
          // name: "我省在销规格数量(个)",
          name: "安徽",
          num: 72,
          range: 23,
        },
      ],
    };
  },
  mounted() {
    if(JSON.parse(sessionStorage.getItem('jygla'))){
      this.jygla=JSON.parse(sessionStorage.getItem('jygla'))
    };
    const date = new Date();
    let fullYear = date.getFullYear();
    let month = date.getMonth();
    if (month === 0) {
      fullYear = fullYear - 1;
      month = 12;
    }
    console.info(fullYear, month, this.orgUuid);
    this.getCityData(fullYear, month.toString().padStart(2, "0"), this.orgUuid);
  },
  methods: {
    getCityData(year, month, orgUuid) {
      console.info(year, month, orgUuid);

      const params = {
        year:year,
        month:month,
        orgUuid:orgUuid,
        columnName:localStorage.getItem("columnName"),
        ...JSON.parse(sessionStorage.getItem('certificateTimObj'))
      };
      debugger;
      console.log(params);
    getECigarCityData(params).then((res) => {
        const data = res.eleCityData.data;
        debugger;
        data.forEach((d) => {
          this.saleData = d;
          
       
          // gross_profit_margin          decimal(15, 2) null comment '累计毛利额',
          //   `rank`                       int            null comment '排名',
          this.saleProfit.push({
            name: "累计毛利额",
            value: d.gross_profit_margin,
          });
          this.saleProfit.push({
            name: "累计毛利额排名",
            value: d.gross_profit_margin_rank,
          });
          //   box_structure                decimal(15, 2) null comment '累计单盒销售结构',
          //   box_structure_rank           int            null comment '累计结构排名'
          this.boxStructure.push({
            name: "累计单盒销售结构",
            value: d.box_structure,
          });
          this.boxStructure.push({
            name: "累计结构排名",
            value: d.box_structure_rank,
          });
        });
        this.ljml=[
        {
          name: "累计毛利额(万元)",
          num: this.saleData.gross_profit_margin,
          unit: "万元",
        },
        {
          name: "累计单盒销售结构",
          num: this.saleData.box_structure,
          unit: "元",
        },
      ];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/qjzl.scss";

.box {
  width: 100%;
  margin-top: 10px;

  .title-img {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    background: url(../../assets/dzygl-new/xsqk/title.png);
    background-size: 100% 100%;
  }

  .content-wrapper {
    // width: 100%;
    // height: 512px;
    // padding: 15px;
    // background: url(../../assets/dzygl-new/xsqk/bg.png);
    // background-size: 100% 100%;

    .title {
      margin-bottom: 10px;
    }

    .sale-qty-wrapper {
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      align-content: center;
      text-align: center;
      width: 100%;
      height: 65px;
      background: url(../../assets/dzygl-new/xsqk/num-bg1.png);
      background-size: 100% 100%;
      padding-top: 10px;

      .name {
        margin-right: 5px;
      }

      .item-wrapper {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        flex-wrap: wrap;

        .item-row {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
        }

        .item {
          display: flex;
        }
      }
    }

    .col3-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .col3-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        text-align: center;
        width: 145px;
        height: 55px;
        background: url(../../assets/dzygl-new/xzxk/num-bg1.png);
        background-size: 100% 100%;
        margin-bottom: 5px;

        .name {
          margin-bottom: 5px;
        }
      }
    }

    .main1 {
      .title {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        margin-bottom: 5px;
      }
    }

    .main2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 15px;
      padding: 0 5px;

      .main1-item {
        margin-top: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        text-align: center;
        width: 210px;
        height: 65px;
        background: url(../../assets/dzygl-new/xsqk/num-bg1.png);
        background-size: 100% 100%;

        .title {
          margin-bottom: 5px;
        }
      }
    }

    .main3 {
      margin: 5px 0 10px;
      display: flex;
      justify-content: space-between;

      .main3-item {
        width: 220px;
        height: 33px;
        line-height: 33px;
        background: url(../../assets/dzygl-new/xsqk/num-bg2.png);
        background-size: 100% 100%;
        text-align: center;
      }
    }

    .main4 {
      display: flex;
      justify-content: space-between;

      .main4-item {
        width: 100px;
        height: 50px;
        text-align: center;

        .num {
          margin-bottom: -10px;
        }

        .title {
          height: 38px;
          line-height: 55px;
          background: url(../../assets/dzygl-new/xsqk/num-bg3.png);
          background-size: 100% 100%;
        }
      }
    }
  }
}

.jygl-box {
  width: 100%;
  margin-top: 10px;

  .main {
    padding: 10px;
    // background: url(../../assets/dzygl-new/xzxk/bg.png);
    background-size: 100% 100%;
    


    .main1 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .main1-item {
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-content: center;
        text-align: center;
        width: 200px;
        height: 50px;
        background: url(../../assets/dzygl-new/xsqk/ppglbj.png);
        // background:url(../../assets/dzygl-new/xsqk/dizuo.png);
        // background: url(../../assets/dzygl-new/jygl/num-bg.png);
        background-size: 100% 100%;

        .title {
          margin-bottom: 5px;
        }
      }

      .main2-item {
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-content: center;
        text-align: center;
        width: 224px;
        height: 50px;
        background:url(../../assets/dzygl-new/xsqk/dizuo.png);
        // background: url(../../assets/dzygl-new/jygl/num-bg.png);
        background-size: 100% 100%;

        .title {
          margin-bottom: 5px;
        }
      }
    }
    .main3 {
      margin: 5px 0 10px;
      display: flex;
      justify-content: space-between;
      
      .main3-item {
        width: 200px;
        height: 30px;
        line-height: 30px;
        // background: url(../../assets/dzygl-new/xsqk/num-bg2.png);
        background-size: 100% 100%;
        text-align: center;
        .num{
          width:100%;
          background: url(../../assets/dzygl-new/xsqk/num-bg2.png);
          .unit{
            color:white !important;
            font-size:14 !important;
            font-weight:600 !important;
          }
        }
      }
    }
  }
  
}
.fs-28{
  font-size:28px !important;
}

.capacity-box {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      // background: url(../../assets/qjzl-new/new/xzxk-bg1.png) no-repeat;
      .ProductionDetailClass {
        z-index: 2;
        position: absolute;
        top: 50px;
        right: -120px;
        width: 320px;
        height: 160px;
        background: url(../../assets/qjzl-new/xzxk/hlrl-pop-bg.png);
        background-size: 100% 100%;
        .capacity-box {
          width: 100%;
          height: 100%;
          padding:10px;
          .head {
            display: flex;
            width: 100%;
            height: 30px;
            .head-item {
              width: 33%;
              height: 30px;
              text-align: center;
              font-weight: 600;
              line-height: 30px;
            }
          }
          .body {
            width: 100%;
            display: flex;
            .body-item {
              width: 33%;
              height: 24px;
              line-height: 24px;
              text-align: center;
            }
          }
        }
      }
      .saleTotalClass{
        z-index: 2;
        position: absolute;
        top: 30px;
        right: -80px;
        width: 260px;
        height: 120px;
        background: url(../../assets/qjzl-new/xzxk/hlrl-pop-bg.png);
        background-size: 100% 100%;
        .capacity-box {
          width: 100%;
          height: 100%;
          padding:5px;
          .head {
            display: flex;
            width: 100%;
            height: 30px;
            .head-item {
              width: 33%;
              height: 30px;
              text-align: center;
              font-weight: 600;
              line-height: 30px;
            }
          }
          .body {
            width: 100%;
            display: flex;
            .body-item {
              width: 50%;
              height: 24px;
              line-height: 24px;
              text-align: center;
            }
          }
        }
      }
}

.lm-top {
  width: 100%;
  height: 40px;
  background-size: 100% 100%;
  margin-bottom: 10px;
}
</style>
